<template>
  <div class="login">
    <van-nav-bar
      title="注册页"
      left-text="返回"
      right-text=". . ."
      left-arrow
      @click-left="$router.back()"
    />
    <div class="block">
      <input type="text" v-model="fromdata.phone" placeholder="请输入手机号" />
    </div>
    <div class="block">
      <input type="password" v-model="fromdata.pass" placeholder="请输入密码" />
    </div>
    <div class="block">
      <input
        type="password"
        v-model="fromdata.checkpass"
        placeholder="请输入确定密码"
      />
    </div>
    <div class="btn" @click="register">
      <input type="button" value="注册" />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { user_register } from "@/utlis/api";
export default {
  data() {
    return {
      fromdata: {
        phone: "",
        pass: "",
        checkpass: "",
      },
    };
  },
  methods: {
    register() {
      // 正侧
      if (/^1[3-9]\d{9}$/.test(this.fromdata.phone) == false) {
        Toast("请输入合法手机号");
      } else if (!this.fromdata.pass || !this.fromdata.checkpass) {
        Toast("请输入密码/正确密码");
      } else if (this.fromdata.pass !== this.fromdata.checkpass) {
        Toast("输入密码不一致");
      } else {
        // 深拷贝
        var newdata = JSON.parse(JSON.stringify(this.fromdata));
        // 删除确定密码
        delete newdata.checkpass;
        user_register(newdata).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            Toast.success(res.data.msg + "前往登录页");
            this.$router.push("/login");
          } else {
            Toast.fail(res.data.msg);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  margin: 0 20px;
  .title {
    text-align: center;
    padding: 20px;
    font-weight: 600;
  }
  input {
    border: 0;
    outline: none;
    width: 100%;
    height: 40px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin: 20px 0;
    line-height: 0px;
  }
}
</style>